import { Component } from "react"
// import store from "./store/storeIndex"
import './Page2.scss'
//connect用来链接显示组件和状态组件用的方法
import { connect } from 'react-redux'
import { ADD_ONE, ADD_NUM } from './store/types'
class Page2 extends Component {

    render() {
        // const count = store.getState().count.count
        // const proList = store.getState().pro.proList
        return <>
            <h1 className="page2H1">Page2------{this.props.count}--------
                {this.props.msg}
            </h1>
            <button onClick={() => this.props.add()}>点击加1</button>
            <button onClick={() => this.props.addNum(5)}>点击加指定数</button>
            <hr />
            <ol>
                {this.props.proList.map(item => <li key={item.proid}>{item.proname}</li>)}
            </ol>
        </>
    }
}
//将全局状态中的数据映射到组件的props中
//state就是全局中的数据
const mapStateToProps = (state) => {
    return {
        count: state.count.count,
        msg: state.count.msg,
        proList: state.pro.proList
    }
}

//将全局状态中的数据映射到组件的props中
const mapDispatchToProps = (dispatch) => {
    return {
        add: () => dispatch({ type: ADD_ONE }),
        addNum:(num)=>dispatch({type:ADD_NUM,payload:num})
    }
}

//包装 Page2 组件，使其能够访问 Redux store 中的数据
export default connect(mapStateToProps, mapDispatchToProps)(Page2)